<template>
  <button v-show="show"
  title="b"
   :style="{
      fontSize:`${size}px`,
     backgroundColor:btnColor,
     border:`${n}px`,
     height:`${gg}px`
      }" 
      :disabled="able"
      >
  <slot name="">按钮-</slot>
  </button>
</template>

<script>
export default {
    
props:{
   b:String,
    size:{
     required:true,
   validator: function(val){
       return val>=10 && val<=20
   }
    },
    gg:{
        required:true,
        validator: function(mm){
       return  mm<=100
   }
    },
    n:{
        required:true,
        validator: function(val){
       return  val<=20
   }
    },
    show:{
        type:Boolean,
        default:true
    },
    able:{
        type: Boolean,
        default: false
    },
    a:{
type:String,
default:'primary',
 validator: function(val){
 return ['primary','success','error','danger'].includes(val)
    },

},},
computed:{
   btnColor(){
       let color
            switch (this.a) {
                case 'primary':
                    color = 'blue'
                    break;
                case 'success':
                    color = 'green'
                    break;
                case 'error':
                    color = 'yellow'
                    break;
                case 'danger':
                    color = 'red'
                    break;
                default:
                    color = 'primary'
                    break;
            }
            return color
        
   }
},
}

</script>

<style scoped>
button{
    width:100px;
    
}
</style>